<template>
  <div>
    <XmTable :config="tableConfig" :noWatchParams="noWatchParams" class="table" ref="table">
      <div slot="filter">
        <el-form class="fl" :inline="true" ref="form" :model="noWatchParams">
          <el-form-item label="后台单号">
            <el-input v-model.trim="noWatchParams.xmbzNo" size="small" placeholder="后台单号" clearable></el-input>
          </el-form-item>
          <el-form-item label="平台单号">
            <el-input v-model.trim="noWatchParams.platformOrderId" size="small" placeholder="平台单号" clearable></el-input>
          </el-form-item>
          <el-form-item label="收货人手机号">
            <el-input v-model.trim="noWatchParams.receiverPhone" size="small" placeholder="收货人手机号" clearable></el-input>
          </el-form-item>
          <el-form-item label="预定人手机号">
            <el-input v-model.trim="noWatchParams.bookerPhone" size="small" placeholder="预定人手机号" clearable></el-input>
          </el-form-item>
          <el-form-item label="咨询类型">
            <XmSelect v-model="noWatchParams.type" size="small" placeholder="咨询类型" :options="typeList" clearable filterable></XmSelect>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="startAndEndTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :default-time="['00:00:00', '23:59:59']"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptions"
              size="medium"
              align="right"
              clearable
              @change="handleTimeChange"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button plain type="primary" @click="search" size="small" icon="el-icon-search" style="margin-left: 10px;">查询
            </el-button>
            <el-button plain @click="reset" size="small" icon="el-icon-delete" style="margin-left: 10px;">清空</el-button>
            <el-button plain icon="el-icon-plus" size="small" type="success" @click="add">添加</el-button>
          </el-form-item>
        </el-form>
      </div>

      <template slot="column-extJson" slot-scope="{data}">
        <div >
          <imageView :src="item" v-for="(item,index) in changeExtJsoncomplaint(data.extJson)" :key="index"
            class="w-80 h-80 mt-10" />
        </div>
      </template>
      <template slot="column-disposeState" slot-scope="{data}">
        <el-tag class="mr-5 mb-5" :type="stateMap[data.disposeState].type" v-if="stateMap[data.disposeState]">
          {{stateMap[data.disposeState].label}}
        </el-tag>
      </template>
      <template slot="column-operate" slot-scope="{data}">
        <el-button v-if="data.disposeState == 0" class="ml-0 mr-5 mb-5" size="mini" @click="edit(data)">
          编辑
        </el-button>
        <el-button v-if="data.disposeState == 0" class="ml-0 mr-5 mb-5" size="mini" @click="handle(data)">
          处理
        </el-button>
        <el-button class="ml-0 mr-5 mb-5" size="mini" @click="viewLog(data)">
          日志
        </el-button>
      </template>
    </XmTable>

    <addDialog ref="addDialog" @submit="search"></addDialog>
    <handleDialog ref="handleDialog" @submit="search"></handleDialog>
    <orderLogDialog ref="orderLogDialog" :config="{contentKey: 'content'}"></orderLogDialog>
  </div>
</template>

<script>
import { workAskLogList } from '@/api/workorder/consultCustomerService'
import tableConfig from './config/table'
import addDialog from './addDialog'
import handleDialog from './handleDialog'
import orderLogDialog from '@/components/dialog/orderLogDialog'
import imageView from '@/components/image/imageView'
import {
  getCacheData, 
} from "@/const/cacheData"
const stateMap = {
  0: {
    label: '未处理',
    type: 'info',
  },
  1: {
    label: '已处理',
    type: 'success',
  },
}

export default {
  data() {
    return {
      tableConfig,
      stateMap,
      cityId: '',
      noWatchParams: {
        xmbzNo: '',
        platformOrderId: '',
        cityId: '',
        deptName: '',
        phone: '',
        type: '',
        timeStart: this.dayjs(new Date())
          .format("YYYY-MM-DD 00:00:00"),
        timeEnd: this.dayjs(new Date())
          .format("YYYY-MM-DD 23:59:59"),
      },
      startAndEndTime: [this.dayjs(new Date())
        .format("YYYY-MM-DD 00:00:00"), this.dayjs(new Date())
        .format("YYYY-MM-DD 23:59:59")],
      pickerOptions:{
        onPick: (obj) => {
          this.pickerMinDate = new Date(obj.minDate).getTime();
        },
        disabledDate:(time)=> {
          if (this.pickerMinDate) {
            const day1 =  31 * 24 * 3600 * 1000;
            let maxTime = this.pickerMinDate + day1;
            let minTime = this.pickerMinDate - day1;
            return time.getTime() > maxTime || time.getTime()<minTime;
          }
        }
      },
      typeList: []
    };
  },
  methods: {
    fetch() {
      this.$refs.table.fetch()
    },
    search() {
      this.fetch()
    },
    reset() {
      this.startAndEndTime = []
      this.noWatchParams = {
        xmbzNo: '',
        platformOrderId: '',
        cityId: '',
        phone: '',
        type: '',
        timeStart: '',
        timeEnd: '',
      }
      this.$nextTick(() => {
        this.fetch()
      })
    },
    add() {
      this.$refs.addDialog.show({ type: 'add' })
    },
    edit(data) {
      this.$refs.addDialog.show({ type: 'edit', data})
    },
    handle(data) {
      this.$refs.handleDialog.show({ data })
    },
    handleTimeChange() {
      this.noWatchParams.timeStart = this.startAndEndTime && this.startAndEndTime[0]
      this.noWatchParams.timeEnd = this.startAndEndTime && this.startAndEndTime[1]
    },
    changeExtJsoncomplaint(list) {
      let imgList = []
      try {
        imgList = JSON.parse(list).img
      } catch (error) {
        console.error(error)
        imgList = []
      }
      return imgList
    },
    handBigPhoto(src) {
      this.$refs.imgDialog.show(src)
    },
    viewLog(data) {
      this.$refs.orderLogDialog.visible = true
      workAskLogList({
        workAskId: data.id,
        type: 1
      }).then(res => {
        const logList = res.data.data || []
        this.$refs.orderLogDialog.showByLogList({logList})
      })
    },
  },
  async created() {
    const list = await getCacheData('ask_service_type')
    this.typeList = list.map(item => {
      return {
        ...item,
        value: item.dictKey,
        label: item.dictValue,
      }
    })
  },
  components: {
    addDialog,
    imageView,
    orderLogDialog,
    handleDialog
  }
};
</script>
<style lang="scss" scoped>

</style>